<template>
  <div class="container" style="max-width: 100%;">
    <div class="app col-md-12" style="background: #fff; padding:10px ; border-radius: 5px; margin-top:30px">
      <div style="display: flex; justify-content: space-between;">
        <div>
          <el-input placeholder="请输入用户名" style="max-width: 160px; margin-right:20px; height:30px"
            v-model="devname"></el-input>
          <el-button @click="queryDev" style="margin-right: 20px; padding:8px 10px">查询</el-button>
          <el-button @click="emptyDev" style="margin-left: 0%; padding:8px 10px">清空</el-button>
        </div>
        <el-button @click="addUse()" type="primary" plain size="small"
          style="font-size: 14px;height:32px">添加用户</el-button>
      </div>
      <div style="margin-top: 5px;">
        <el-button @click="deleteAll" style="margin-left: 0%;padding: 8px 10px;">批量删除</el-button>
      </div>
      <template>
        <el-table @selection-change="handleSelectionChange" :data="tableData" border style="width: 100%; margin-top:10px;"
          height="542" :index-key="index => index">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="userId" label="用户名" :width="formwidth"></el-table-column>
          <el-table-column prop="detail" label="中文名" :width="formwidth"></el-table-column>
          <el-table-column prop="roleId" label="角色" :width="formwidth"></el-table-column>
          <el-table-column prop="addTime" label="创建时间" :width="formwidth"></el-table-column>
          <el-table-column prop="overdueDate" label="过期时间" :width="formwidth"></el-table-column>
          <el-table-column prop="isApp" label="推送app" :width="formwidth">
            <template slot-scope="isApp">
              <span v-show="isApp.row.isApp == true">开启</span>
              <span v-show="isApp.row.isApp == false">未开启</span>
            </template>
          </el-table-column>
          <el-table-column prop="isSms" label="发送短信" width="180">
            <template slot-scope="isSms">
              <span v-show="isSms.row.isSms == true">开启</span>
              <span v-show="isSms.row.isSms == false">未开启</span>
            </template>
          </el-table-column>
          <el-table-column prop="isPhone" label="手机号" width="180">
            <template slot-scope="isPhone">
              <span v-show="isPhone.row.isPhone == true">开启</span>
              <span v-show="isPhone.row.isPhone == false">未开启</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="170">
            <template slot-scope="scope">
              <el-button @click="changePsw(scope.row)" type="warning" size="small">修改密码</el-button>
              <el-button @click="replaceDev(scope.row)" type="primary" size="small">编辑</el-button>
              <el-button @click.native.prevent="deleteRow(scope, tableData)" type="danger" size="small">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[10, 15, 20]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="tota">
        </el-pagination>
      </template>
      <usePop :params="params" :usetitle="addTitle" :showHide="showHide" @custom-event="devHidden"></usePop>
      <Delete :deletshow="deletshow" :deleteurl="deleteurl" @delete-event="deleteDialog" :selectList="selectList">
      </Delete>
    </div>
  </div>
</template>
  
<script>
import { getData, getWork } from '@/api/table'
import { Message } from 'element-ui'
import usePop from '@/components/public/usePop.vue'
import Delete from "@/components/Form/delete.vue";

export default {
  // 组件
  components: {
    usePop, Delete
  },
  data() {
    return {
      deleteurl: "",
      deletshow: false,
      selectList: [],//选中的数据
      formwidth: '180',//表格列宽度
      formdata: '',
      // 获取用户信息
      getUsers(data) {
        getData('/user/list', data).then(res => {
          this.tableData = res.msg
          this.tota = res.total
        })
      },
      // 查询名字字段
      devname: '',

      tableData: [],

      // 默认每页显示的条数（可修改）
      PageSize: 10,

      // 默认显示第一条
      currentPage: 1,

      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 1,

      dialogTableVisible: false,
      // 组件显示隐藏
      showHide: false,
      // 传递给组件的信息
      params: {
        "addTime": '',//创建时间
        "isApp": '',//推送app
        "isPhone": '',//拨打电话
        "isSms": '',//发送短信
        "overdueDate": '',//过期时间
        "pwd": "",//密码
        "roleId": "",//角色
        "userId": "",//用户ID
        "detail": ""//用户名
      },
      // 弹窗添加的标头
      addTitle: {
        'title': '修改用户信息',
        "addTime": '创建时间',//创建事件
        "isApp": '推送app',//推送app
        "isPhone": '拨打电话',//拨打电话
        "isSms": '发送短信',//发送短信
        "overdueDate": '过期时间',//过期时间
        "pwd": "密码",//密码
        "roleId": "角色",//角色
        "userId": "用户名",//用户ID
        "detail": "中文名"
      },
      formLabelWidth: '120px',
      // 总条数
      tota: 0,
      // 类别
      category: '',
      state: ''
    }
  },

  methods: {
    // 点击表格的选择框
    handleSelectionChange(val) {
      // console.log(val);
      let setlist = []
      for (let index = 0; index < val.length; index++) {
        setlist.push(val[index].userId)
        setlist.filter(item => { return item })
      }
      // 批量删除数组
      this.selectList = setlist
      // console.log(this.selectList);
    },
    deleteAll() {
      if (this.selectList.length == 0) {
        Message({
          message: '选择不能为空',
          type: 'waring',
          duration: 3 * 1000
        })
      } else {
        this.deletshow = true
        this.deleteurl = '/user/batchRemove'
      }
    },
    //修改密码
    changePsw(row) {
      this.showHide = true;
      this.addTitle.title = '修改密码'
      this.params = row
    },
    // 添加用户信息
    addUse() {
      this.showHide = true;
      this.addTitle.title = '添加用户'
    },
    //修改用户信息
    replaceDev(prop) {
      this.showHide = true;
      this.params = prop
      this.addTitle.title = '修改用户信息'
    },
    // 删除用户
    deleteRow(scops, rows) {
      this.formdata = new FormData()
      this.formdata.append('userId', scops.row.userId)
      getData('/user/remove', 'post', this.formdata).then(res => {
        if (res.code == 0) {
          rows.splice(scops.$index, 1);
        }
        Message({
          message: res.msg,
          type: 'success',
          duration: 3 * 1000
        })
      })
    },
    // 查询表单条数
    handleSizeChange(val) {
      this.PageSize = val
      let data = { limit: val, offset: this.currentPage - 1, search: this.devname }
      getData('/user/list', 'get', data).then(res => {
        this.tableData = res.msg
        this.tota = res.total
      })
    },
    // 查询表单页数
    handleCurrentChange(val) {
      this.currentPage = val
      let data = { limit: this.PageSize, offset: this.PageSize * (this.currentPage - 1), search: this.devname }
      getData('/user/list', 'get', data).then(res => {
        this.tableData = res.msg
        this.tota = res.total
      })
    },
    deleteDialog(data) {
      this.deletshow = data
    },
    // 组件穿过来对话框是否显示
    devHidden(data) {
      this.showHide = data
      this.params = {
        "addTime": '',//创建时间
        "isApp": '',//推送app
        "isPhone": '',//拨打电话
        "isSms": '',//发送短信
        "overdueDate": '',//过期时间
        "pwd": "",//密码
        "roleId": "",//角色
        "userId": "",//用户ID
        "userName": ""//用户名
      }
    },
    //查询用户
    queryDev() {
      // this.devname; 输入框输入的内容
      let data = { search: this.devname }
      getWork('/user/list', 'get', data).then(res => {
        this.tableData = res.msg
        this.tota = res.total
      })
    },
    // 清空查询
    emptyDev() {
      this.devname = ''
      getData('/user/list', 'get').then(res => {
        this.tableData = res.msg
        this.tota = res.total
      })
    }
  },
  created() {
    // 获取用户列表
    getData('/user/list', 'get').then(res => {
      // console.log(res);
      this.tableData = res.msg
      this.tota = res.total
    })
  },

}
</script>
<style>
.el-table__fixed-body-wrapper {
  border-top: 0px solid #e2e2e2;
}

.el-table td.el-table__cell div {
  height: 24px;
  white-space: nowrap;
}

.el-button--small {
  padding: 3px;
}

.el-divider {
  margin: 10px 0;
}

.el-table--fit {
  border: 1px solid #e2e2e2;
}

@media (min-width: 1200px) {

  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 1320px;
  }
}

input:focus {
  border-bottom: 1px solid #007bff;
  outline: 1px solid #007bff;
  /*border-color: #007bff; 移除默认的蓝色轮廓线 */
}

.el-dialog {
  width: 40% !important;
}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border: 1px solid #EBEEF5;
}
</style>
  